<template>
    <div class="app-container detail">
      <el-row class="headline">
        <el-col :span="3">
          <span>担保详情</span>
        </el-col>
        <el-col :span="9" :offset="7">
          <el-steps align-center :space="100">
            <el-step title="初审" class="stepActive" />
            <el-step title="复审" class="stepActive" />
            <el-step title="终审" class="stepActive"  />
            <el-step title="放款" class="stepActive"  />
            <el-step title="还款" class="stepActive" />
            <el-step title="完成" />
          </el-steps>
        </el-col>
        <el-col :span="1" :offset="1">
          <el-button size="small" :icon="Printer" v-print="printObj"
          @click="upadtaPrintStatus">打印</el-button>
        </el-col>
        <el-col :span="1" :offset="1">
          <el-button size="small"  @click="goBack" :icon="ArrowLeft">返回</el-button>
        </el-col>
      </el-row>
      <div  ref="printTest" id="printTest">

        <div class="info-title">（客户【{{customerName}}】还款信息）</div>
        <el-row justify="center">
          <el-col :span="23" >
             <el-table :data="cutomerList">
              <el-table-column label="期限" align="center" key="stages_phase" prop="stages_phase" width="60px" />
              <el-table-column label="应还款日" align="center" key="pmt_due_date" prop="pmt_due_date" />
              <el-table-column label="实际还款日" align="center" key="grace_date" prop="grace_date" width="140px" >
                  <template #default="scope">
                        <div>{{ scope.row.grace_date }}</div>  
                  </template>
              </el-table-column>
              <el-table-column label="本金" align="center" key="ctd_principal_amt" prop="ctd_principal_amt" /> 
              <el-table-column label="利息" align="center" key="ctd_interesta_amt" prop="ctd_interesta_amt" /> 
              <el-table-column label="管理费" align="center" key="manage_amt" prop="manage_amt" />  
              <el-table-column label="还款总额" align="center" key="stages_amount" prop="stages_amount" /> 
              <el-table-column label="减免金额" align="center" key="reduction_amt" prop="reduction_amt" /> 
              <el-table-column label="逾期天数" align="center" key="overdue_days" prop="overdue_days" /> 
              <el-table-column label="状态" align="center" key="status" prop="status" /> 
              <el-table-column label="提交人" align="center" key="submitter_name" prop="submitter_name" /> 
              <el-table-column label="提交时间" align="center" key="submit_time" prop="submit_time" width="120px" /> 
              <el-table-column label="还款备注" align="center" key="submit_str" prop="submit_str" width="120px"  >
                  <template #default="scope">
                     <div>{{ scope.row.submit_str }}</div>
                  </template>
              </el-table-column> 
              <el-table-column  label="审核意见" align="center" key="review_str" prop="review_str" /> 
              <el-table-column label="审核人" align="center" key="reviewer_name" prop="reviewer_name" /> 
          </el-table>
          </el-col>
        </el-row>
        <el-row justify="center">
            <el-col :span="16" >
                <div style="margin-top:20px">
                  <TabAcross title="担保信息" :list="loanList"></TabAcross>
                  <TabAcross title="费用信息" :list="costList"></TabAcross>
                  <TabAcross title="银行信息" :list="bankList"></TabAcross>
                </div>
            </el-col>
        </el-row>
      </div>
    </div>
  </template>
  <script setup name="Paydetail">
import { ArrowLeft ,Printer} from "@element-plus/icons-vue";
import { detail } from "@/api/collection/expire";

import { onActivated, reactive } from "vue";
import { getId } from "@/utils/auth";
import TabAcross  from "@/components/TabAcross"
const { proxy } = getCurrentInstance();
  const route = useRoute();
  const router = useRouter();
  const customerName = ref('')
  const aduitShow = ref(false);
  const cutomerList = ref([]);
 
  const data = reactive({
    aduitForm:{
      id:undefined,
      apply_id:undefined,
      review_result:undefined,
      review_str:undefined
    },
    customerInfos:{
         user_name:'',
         loan_type_classify:'',
         loan_type_name:'',
         loan_stages: '',
         apply_quota: '',
         method_type:'',
         contract_amount:'',
         approval_amount:"", 
         purpose_name:"", 
         approval_rate:""
    },
    rulest:{
      review_result:[{ required: true, message: "请选择审核结论", trigger: "change" }],
  }
  })
  const { aduitForm ,customerInfos,rulest} = toRefs(data);
  const loanList = ref([]);
  const costList = ref([]);
  const bankList = ref(
    [
        [{ title: '开户行：', value: '中国银行' }, { title: '户名：', value: '李海' }],
        [{ title: '开户地：', value: '广东省 深圳市 福田区' }, { title: '支行名称：', value: '开户行支行名称' }],
        [{ title: '银行帐号：', value: '6225 8888 8888 8888' }]  
    ]
  )
  function viewDetail(){
    detail(history.state.infos.apply_id).then(res=>{
      console.log(res)
      cutomerList.value = res.data.map(item=>{
              item.pmt_due_date = item.pmt_due_date.slice(0,10);
              item.grace_date = item.grace_date?.slice(0,10);
              return item
      })
    })
  }
  /**获取数据信息*/
 function getInfos(){
    customerInfos.value = {...history.state.infos};
    console.log(customerInfos.value)
    customerName.value = history.state.infos.user_name;
    loanList.value =
        [
            [{ title: '客户姓名：', value: customerInfos.value.user_name,link:"客户资料档案"},{ title: '', value: '' }],
            [{ title: '担保性质：', value: customerInfos.value.loan_type_classify }, { title: '担保类型：', value: customerInfos.value.loan_type_name }],
            [{ title: '担保用途：', value: customerInfos.value.purpose_name },{ title: '还款方式：', value: customerInfos.value.method_type }],
            [{ title: '担保期限：', value: customerInfos.value.loan_stages},{ title: '申请金额：', value: customerInfos.value.apply_quota }],
            [{ title: '审批金额：', value: customerInfos.value.approval_amount },{ title: '合同金额：', value: customerInfos.value.contract_amount}]
        
        ];
    costList.value =    [
        [{ title: '综合利率：', value:  customerInfos.value.approval_rate}, { title: '服务费：', value: '0.0（0.00元）' }],
        [{ title: '管理费：', value: '0.0% （每月0.00元）' }]
    ]
  }
   /** 返回 */
 function goBack() {
      proxy.$tab.closeOpenPage('soon')
 };
 let printObj = reactive({
  id: "printTest", //绑定打印区域id
  popTitle: "", //内容标签
  beforeOpenCallback(vue) {
    console.log("打开之前");
  },
  //调用打印工具成功回调函数
  openCallback(vue) {
    console.log("执行了打印");
  },
  //关闭打印机的回调
  closeCallback(vue) {
    console.log("关闭了打印工具");
  },
});
function upadtaPrintStatus(){

}
 getInfos();
 viewDetail();
  </script>
  <style lang="scss" scoped>
  .info-title{
    line-height: 72px;
    text-align: center;
  }
  .detail {
    overflow: hidden;
  }
  .detail:deep(.el-step__line) {
    background: #fff;
    opacity: 0;
  }
  :deep(.el-step__icon.is-text) {
    border: 1px solid;
  }
  :deep(.el-step__icon) {
    height: 14px;
    width: 14px;
  }
  :deep(.el-steps) {
    background: #f2f2f2;
    margin-top: 3px;
  }
  :deep(.el-step.is-horizontal) {
    display: flex;
    padding-right: 5px;
  }
  :deep(.el-step__title) {
    line-height: 20px;
  }
  :deep(.el-step__main) {
    white-space: nowrap;
  }
  :deep(.el-step__head.is-finish) {
    color: #333;
    border-color: #333;
  }
  :deep(.el-step__title.is-finish) {
    color: #333;
  }
  :deep(.el-step__head.is-wait) {
    color: #333;
    border-color: #333;
  }
  :deep(.el-step__title.is-wait) {
    color: #333;
  }
  :deep(.el-step__title.is-process) {
    color: #333;
    font-weight: 400;
  }
  :deep(.el-step__head.is-process) {
    font-weight: none;
    color: #333;
    border-color: #333;
  }
  .stepActive {
    background: black;
    :deep(.el-step__title) {
      line-height: 20px;
    }
    :deep(.el-step__title.is-finish) {
      color: #fff;
    }
    :deep(.el-step__title.is-wait) {
      color: #fff;
    }
    :deep(.el-step__title.is-process) {
      color: #fff;
      font-weight: 400;
    }
  }
  </style>
  